<style  scoped>
.icon-delete {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: red;
}
.radio-type {
  position: absolute;
  right: 50px;
  top: 0px;
}
.demo-split {
  height: 650px;
  border: 1px solid #dcdee2;
}
.left-pane .split-pane-left {
  padding: 10px;
  background: #fff;
}
.tdEpi .ivu-table-cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.demo-split-pane {
  padding: 10px;
}
.p-card {
  color: black;
  font-weight: bold;
}
</style>

<template>
  <div>
    <Divider orientation="left">考勤详情-{{name}}</Divider>
    <Table
      border
      :loading="loadingDetail"
      :columns="tableTitleDetail"
      :data="tableDataDetail"
      ref="table"
      :height="tableHeight"
    ></Table>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import {
  SearchCheckOnWorkSta,
  SearchCheckOnWork,
  GetCheckOnWorkRule,
  ChengeheckOnWorkRule
} from "@/api/work";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "checkonwork_detail",
  data() {
    return {
      loadingDetail: false,
      tempEmp: {},
      tableTitleDetail: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "日期",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                props: {
                  type: "success",
                  size: "small"
                },

                on: {}
              },
              dayjs(params.row.WorkDate).format("YYYY-MM-DD") +
                "（" +
                params.row.DeWeek +
                "）"
            );
          }
        },
        {
          title: "上班打卡",
          key: "CheckRecord1",
          align: "center",
          width: 200,
          render: (h, params) => {
            if (params.row.CheckState1 > 0) {
              return h("div", [
                h(
                  "span",
                  {
                    style: { marginRight: "10px" },
                    on: {}
                  },
                  params.row.CheckRecord1
                    ? dayjs(params.row.CheckRecord1).format("HH:mm:ss")
                    : ""
                ),
                h(
                  "Tag",
                  {
                    props: {
                      color: this.GetCheckStateColor(params.row.CheckState1)
                    }
                  },
                  this.GetCheckState(params.row.CheckState1)
                )
              ]);
            } else {
              return h(
                "span",
                {
                  style: { marginRight: "10px" },
                  on: {}
                },
                params.row.CheckRecord1
                  ? dayjs(params.row.CheckRecord1).format("HH:mm:ss")
                  : ""
              );
            }
          }
        },
        {
          title: "打卡地点",
          key: "CheckAddress1",
          align: "center",
          width: 200
        },
        {
          title: "下班打卡",
          key: "CheckRecord1",
          align: "center",
          width: 200,
          render: (h, params) => {
            if (params.row.CheckState2 > 0) {
              return h("div", [
                h(
                  "span",
                  {
                    style: { marginRight: "10px" },
                    on: {}
                  },
                  params.row.CheckRecord1
                    ? dayjs(params.row.CheckRecord2).format("HH:mm:ss")
                    : ""
                ),
                h(
                  "Tag",
                  {
                    props: {
                      color: this.GetCheckStateColor(params.row.CheckState2)
                    }
                  },
                  this.GetCheckState(params.row.CheckState2)
                )
              ]);
            } else {
              return h(
                "span",
                {
                  style: { marginRight: "10px" },
                  on: {}
                },
                params.row.CheckRecord1
                  ? dayjs(params.row.CheckRecord2).format("HH:mm:ss")
                  : ""
              );
            }
          }
        },
        {
          title: "打卡地点",
          key: "CheckAddress2",
          align: "center",
          width: 200
        },
        {
          title: "外勤信息",
          key: "CheckRemark1",
          align: "center",
          width: 220,
          render: (h, params) => {
            return h(
              "span",
              {
                style: { marginRight: "10px" },
                on: {}
              },
              (params.row.CheckRemark1 ? params.row.CheckRemark1 : "") +
                "　" +
                (params.row.CheckRemark2 ? params.row.CheckRemark2 : "")
            );
          }
        },

        {
          title: " "
        }
      ],
      tableDataDetail: [],
      tableHeight: 450
    };
  },
  computed: {},
  props: {
    id: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    sdate: {
      type: String,
      required: true
    },
    edate: {
      type: String,
      required: true
    }
  },
  methods: {
    dayjs,
    SearchCheckOnWork() {
      let vm = this;

      var reqData = {
        sdate: vm.sdate,
        edate: vm.edate,
        empid: vm.id
      };
      vm.loadingDetail = true;
      SearchCheckOnWork(reqData).then(res => {
        vm.loadingDetail = false;
        const data = res.data;
        if (data.Type == 1) {
          vm.tableDataDetail = data.Data;
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    GetCheckState(state) {
      if (state == 1) {
        return "迟到";
      } else if (state == 2) {
        return "早退";
      } else if (state == 9) {
        return "缺卡";
      } else {
        return "";
      }
    },
    GetCheckStateColor(state) {
      if (state == 1) {
        return "warning";
      } else if (state == 2) {
        return "warning";
      } else if (state == 9) {
        return "warning";
      } else {
        return "";
      }
    }
  },
  created() {},
  mounted() {
    let vm = this;
    this.tableHeight = window.innerHeight - 260;
    this.SearchCheckOnWork();
  }
};
</script>
